<template>
	<view>
		<view class="card-item" style="height: 332rpx;" :style="{'border-bottom':surplus?'8rpx solid #FFD921':'8rpx solid #BBBBBB'}" @click="onClickItem" v-if="item.self_Service_Car_Wash_Card_Id==='37'&&item.purchase_Channel === 99">
		  <view class="top">
		    <view class="title-box">
		      <view class="title"><text :style="{'color':surplus?'':'#999999'}">{{item.coupon_Name}}</text></view>
		      <text class="num">x1</text>
		    </view>
		    <view class="other flex-jc-sb">
		      <view class="surplus"><text :style="{'color':surplus?'':'#999999'}">洗车</text></view>
		      <view class="amount flex flex-ai-c flex-jc-sb" style="width: 190rpx;">
		        <view style="flex: 1;color: #999;font-size: 24rpx;"><text>仅需：</text></view>
		        <text class="red" :style="{'color':surplus?'':'#999999'}">￥<text class="value">20.00</text></text>
		      </view>
		    </view>
				<view class="other flex-jc-sb">
				  <view class="surplus"><text :style="{'color':surplus?'':'#999999'}">自助洗车×1</text></view>
				  <view class="amount flex flex-ai-c flex-jc-sb" style="width: 190rpx;">
						<view style="color: #999;font-size: 24rpx;"><text>仅需：</text></view>
				    <text class="red" :style="{'color':surplus?'':'#999999'}">￥<text class="value">0.00</text></text>
				  </view>
				</view>
		  
			<view style="color: #F1635B;font-size: 24rpx;">*洗车仅需20元，自助洗车0元，仅限环球中心店使用。</view>
			</view>
		  <view class="bottom">
		    <view class="left" v-if="item.deadline!=='1901-01-01 00:00:00'"><text>有效期至 {{item.deadline}}</text></view>
				<view class="left" v-else><text>无期限</text></view>
		    <view class="right" @click.stop="onClickItem" :style="{'background':surplus?'':'#D7D7D7'}"><text>去洗车</text></view>
		  </view>
		</view>
		<view class="card-item" :style="{'border-bottom':surplus?'8rpx solid #FFD921':'8rpx solid #BBBBBB'}" @click="onClickItem" v-else>
		  <view class="top">
		    <view class="title-box">
		      <view class="title"><text :style="{'color':surplus?'':'#999999'}">{{item.coupon_Name}}</text></view>
		      <text class="num">x1</text>
		    </view>
		    <view class="other">
		      <view class="surplus"><text :style="{'color':surplus?'':'#999999'}">剩余<text class="bold" :style="{'color':surplus?'':'#999999'}">{{surplus}}</text>{{unit}}</text></view>
		      <view class="tips"><text>支持全国门店使用</text></view>
		      <view class="amount">
		        <text>实付：</text>
		        <text class="red" :style="{'color':surplus?'':'#999999'}">￥<text class="value">{{amount}}</text></text>
		      </view>
		    </view>
		  </view>
		  <view class="bottom">
		    <view class="left" v-if="item.deadline!=='1901-01-01 00:00:00'"><text>有效期至 {{item.deadline}}</text></view>
				<view class="left" v-else><text>无期限</text></view>
		    <view class="right" @click.stop="goWashCar" :style="{'background':surplus?'':'#D7D7D7'}"><text>去洗车</text></view>
		  </view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      
    }
  },
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    },
		type:{
			type:String,
			default:''
		},
		id:{
			type:String,
			default:''
		}
  },
  created() {
		console.log(this.item,'123')
  },
  computed: {
    surplus() {
      let text = ''
      if(this.item.card_Type === 1) {
        text = this.item.day<=0?0:this.item.day
      } else if(this.item.card_Type === 2) {
        text = this.item.left_Times
      } else if(this.item.card_Type === 3) {
        text = Math.floor(this.item.left_Seconds / 60)
      } else if(this.item.card_Type === 4) {
        text = this.item.card_Left_Cost<=0?0:this.item.card_Left_Cost
      }
      return Number(text)
    },
    unit() {
      let text = ''
      if(this.item.card_Type === 1) {
        text = '天'
      } else if(this.item.card_Type === 2) {
        text = '次'
      } else if(this.item.card_Type === 3) {
        text = '分'
      } else if(this.item.card_Type === 4) {
        text = '元'
      }
      return text
    },
    amount() {
      return parseFloat(this.item.actually_Money).toFixed(2)
    }
  },
  methods: {
    onClickItem() {
			if(this.type==='choose'){
				let text = 0
				if(this.item.card_Type === 1) {
				  text = this.item.day<=0?0:this.item.day
				} else if(this.item.card_Type === 2) {
				  text = this.item.left_Times
				} else if(this.item.card_Type === 3) {
				  text = Math.floor(this.item.left_Seconds / 60)
				} else if(this.item.card_Type === 4) {
				  text = this.item.card_Left_Cost<=0?0:this.item.card_Left_Cost
				}
				if(text===0){
					console.log(text,0)
					return false
				}else{
					console.log(text,1)
					this.goWashCar()
				}
				
			}else{
				this.$emit('click', this.item)
			}
      
    },
    goWashCar() {
			if(this.type==='choose'){
				let text = 0
				if(this.item.card_Type === 1) {
				  text = this.item.day<=0?0:this.item.day
				} else if(this.item.card_Type === 2) {
				  text = this.item.left_Times
				} else if(this.item.card_Type === 3) {
				  text = Math.floor(this.item.left_Seconds / 60)
				} else if(this.item.card_Type === 4) {
				  text = this.item.card_Left_Cost<=0?0:this.item.card_Left_Cost
				}
				if(text===0){
					console.log(text,0)
					return false
				}
				let pages = getCurrentPages();  //获取所有页面栈实例列表
				let nowPage = pages[ pages.length - 1];  //当前页页面实例
				let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
				// prevPage.$vm.id = this.id;   //修改上一页data里面的searchVal参数值为1211
				prevPage.$vm.cardId = this.item.id;   //修改上一页data里面的searchVal参数值为1211
				uni.navigateBack({
					delta:1
				})
				/* uni.redirectTo({
					url:'/pages_commodity/selfWash/existingOrder?id='+this.id+'&cardId='+this.item.id
				}) */
			}else{
				uni.navigateTo({
				  url: '/pages_commodity/selfWash/map'
				})
			}
      
    }
  }
}
</script>

<style lang="scss" scoped>
.card-item{
  margin: 40rpx 26rpx;
  position: relative;
  height: 216rpx; 
  background-color: #fff; 
  box-shadow: 0 0 10rpx 0 rgba(160, 160, 160, 0.35);
  border-bottom: 8rpx solid #FFD921;
  border-radius: 10rpx;
  padding: 0 30rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  &:first-child{
    margin-top: 20rpx;
  }
  .top{
    .title-box{
      display: flex;
      justify-content: space-between;
      .title{
        font-size: 36rpx;
        color: #333;
        font-weight: bold;
      }
      .num{
        font-size: 24rpx;
        color: #333;
      }
    }
    .other{
      display: flex;
      align-items: center;
      .surplus{
        font-size: 24rpx;
        color: #333;
        .bold{
          font-size: 32rpx;
          color: #5ED085;
          font-weight: bold;
        }
      }
      .tips{
        flex: 1;
        font-size: 24rpx;
        color: #999;
        margin-left: 24rpx;
      }
      .amount{
        font-size: 24rpx;
        color: #999;
        .red{
          color: #F1635B;
        }
        .value{
          font-size: 32rpx;
          font-weight: bold;
        }
      }
    }
  }
  .bottom{
    margin-top: 28rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left{
      color: #999;
      font-size: 24rpx;
    }
    .right{
      width: 146rpx;
      height: 54rpx;
      background: linear-gradient(0deg, #FBD220, #FFE23E);
      border-radius: 27rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26rpx;
      color: #333;
    }
  }
}
</style>
